import {BrowserRouter, Routes, Route, useNavigate, usenav, Outlet, Link, NavLink} from"react-router-dom"
import useTable from "../../../framework/common/lifecycle/useTable"
import request from "../../../framework/common/utils/request";
import { Modal, Select, Form, Input, Table, Tag, Button, message } from "antd";
import eventBus, { useSubscribe } from "../../../framework/common/eventBus";
import { useEffect, useState } from "react";
const { Option } = Select;

export default function (){

    const [data, setData] = useState({
        selectOptions: [],//客户名称选项
        selectLabelKey: "TenantName",//客户名称文本key
        selectValueKey: "TenantName",//客户名称value key
    });

    useEffect(function(){
        request({
            url: "/platform/tenant-manager/load-tenant-names",
            method: "get"
        }).then(function (response) {
            if(response?.code === 1){
                setData({
                    ...data,
                    selectOptions: response?.data || []
                });//设置客户名称选项
            }
        });
    }, [])

    const navigate= useNavigate();
    //生成table组件
    const [form] = Form.useForm();
    const { tableProps, search } = useTable(
        (
        {
            current = 1, // 设定初始在第1页
            pageSize, // 初始每页默认10条数据
            // sorter,
        },
        formData
        ) => {
        return request({
            url: "/platform/tenant-manager/list",
            method: "post",
            data: {
                pageIndex: current,
                pageSize: pageSize,
                ...formData
            },
        }).then(function (response) {
            if(response?.code === 1){
                let list = response?.data?.list || [];
                list.forEach((item, index) => {
                    item.index = index + 1 + (current - 1) * 10;//设置序号
                });
                return {
                    total: response.data.total,
                    list: list,
                };
            }
        });
        },
        {
        form,
        defaultPageSize: 10
        }
    );
    const { submit } = search;

    //生成table列信息
    let columns = [
            {
                title: "序号",
                dataIndex: "index",
                width: 70,
                align:"center"
            },
            {
                title: "租户号",
                dataIndex: "TenantCode",
                render: (text, record, index) => {
                    return <>
                        <Button type="link"
                            onClick={()=>{
                                navigate("/platform-manage/tenant/detail?tenantCode=" + text ,  {
                                    state: record
                                });
                            }}
                        >{text}</Button>
                    </>
                },
            },
            {
                title: "客户名称",
                dataIndex: "TenantName",
            },
            {
                title: "开户时间",
                dataIndex: "CreateOn",
                render: (text, record, index) => {
                    return text || "-"
                },
            }
    ];

    //设置输入框placeholder
    return <>
        <div className="pt-3 px-3">
            <Form 
                form={form}
                layout={"inline"}
            >
                <Form.Item  name="tenantCode" >
                    <Input className="mr-3" autoComplete="off" placeholder="租户号" style={{ width: 290}} />
                </Form.Item>
                <Form.Item  name="tenantName">
                    <Select
                        showSearch
                        placeholder="客户名称"
                        optionFilterProp="children"
                        onChange={submit}
                        allowClear={true}
                        filterOption={true}
                        style={{ width: 290}}
                        fieldNames={{
                            label: data.selectLabelKey,
                            value: data.selectValueKey
                        }}
                        options={data.selectOptions}
                    >
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Button type="primary"
                        className="mr-3"
                        htmlType="submit"
                        onClick={submit}
                    >筛选</Button>
                    <Button onClick={()=>{
                        form.resetFields();
                        submit();
                    }}>重置</Button>
                </Form.Item>
            {/* onSearch={submit} */}
            </Form>
        </div>
        <div className="overflow-hidden pb-2 pt-3 px-3 leading-8">
            <span className="text-base">租户管理</span>
        </div>
        <Table
        className="table-content-full"
        columns={columns}
        scroll={{ y: 2000 }} 
        rowKey={"TenantCode"}
        {...tableProps}
        />
    </>
}